<template>
	<page-body>
		<view class="page">
			<view class="flex benben-position-layout flex flex-wrap align-center talk_flex_0"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex flex-wrap align-center justify-between flex-sub talk_fd0_0'>
					<view class='flex flex-wrap align-center talk_fd0_0_c0'>
						<text class='fu-iconfont2  talk_fd0_0_c0_c0' @tap.stop="handleJumpDiy" data-type="back"
							data-url="1">&#xE794;</text>
					</view>
					<view class='flex flex-wrap align-stretch justify-center'>
						<text class='talk_fd0_0_c1_c0'>班级二维码</text>
					</view>
					<view class='flex flex-wrap align-center justify-end talk_fd0_0_c0'>
					</view>
				</view>
			</view>
			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
			<view class="page-content">
				<view class="content-inner">
					<view class="cont-top">
						<image
							style="width: 122rpx;height: 122rpx;flex-shrink: 0;margin-right: 28rpx;border-radius:122rpx ;"
							:src="baseObj.imgroup_avatar" mode=""></image>
						<view class="top-right">
							<view class="name">
								{{baseObj.baseclass_name}}
							</view>
							<view class="qun-number">
								<view class="number">
									群号：{{groupId}}
								</view>
								<view class="copy" @click.stop="copyHandle">
									<image style="width: 20rpx;height: 20rpx;flex-shrink: 0;margin-right: 8rpx;"
										src="@/static/talkImage/copy.png" mode=""></image>
									复制
								</view>
							</view>

						</view>
					</view>
					<img class="ma" src="@/static/talkImage/copy.png" alt="" />
				</view>
				<view class="scan">
					扫一扫二维码，加入班级群聊
				</view>
			</view>
			<view :style="{height: (110+bottomSafeAreaRpx)+'rpx'}"></view>
		</view>
	</page-body>
</template>
<script>
	import {
		validate
	} from '@/common/utils/validate.js'


	export default {
		data() {
			return {
				groupId: "",
				baseObj: "",
				userInfo: ''
			}
		},
		onShow() {

		},
		// 小程序页面生命周期，如果是 uni-app 可以写
		onLoad(options) {
			this.groupId = decodeURIComponent(options.groupId)

			console.log(this.groupId);

			this.baseObj = uni.getStorageSync('BASEOBJ') || ''
			this.userInfo = uni.getStorageSync('USER_INFO') || ''

			this.getPeopleList()
		},
		computed: {
			// 计算属性
		},
		watch: {
			// 监听器
		},
		methods: {
			async getPeopleList() {
				let res = await this.$api.post(global.apiUrls.post68c249a209135, {
					groupid: this.groupId,
					baseclass_id: this.userInfo.baseclass_id,
					courseplan_id: 77,
				})

				if (res.data.code == 1) {


				}
			},
			copyHandle() {
				uni.setClipboardData({
					data: this.groupId,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					},
					fail: (err) => {
						console.log('复制失败', err)
					}
				})
			}

		},

		onReady() {},

		onHide() {},
		onUnload() {},
	}
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #F3F4F8;
		background-size: 100% auto;

	}

	.page-content {
		.content-inner {
			width: 622rpx;
			height: 880rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			margin: 88rpx auto;
			overflow: hidden;

			.cont-top {
				width: 502rpx;
				display: flex;
				margin-top: 64rpx;
				margin-left: 60rpx;
				padding-bottom: 64rpx;
				border-bottom: 1px dashed #8C8C8C;

				.top-right {
					display: flex;
					flex-direction: column;

					.name {
						width: 346rpx;
						height: 52rpx;
						font-weight: bold;
						font-size: 36rpx;
						color: #333333;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.qun-number {
						display: flex;
						margin-top: 24rpx;

						.number {
							font-weight: 400;
							font-size: 28rpx;
							color: #8C8C8C;
							width: 254rpx;
							height: 40rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}

						.copy {
							display: flex;
							width: 96rpx;
							height: 40rpx;
							border-radius: 8rpx 8rpx 8rpx 8rpx;
							border: 1rpx solid #EEEEEE;
							font-weight: 400;
							font-size: 22rpx;
							color: #333333;
							justify-content: center;
							align-items: center;
						}
					}
				}
			}

			.ma {
				width: 502rpx;
				height: 502rpx;
				margin-top: 64rpx;
				margin-left: 61rpx;
			}


		}

		.scan {
			font-weight: 400;
			font-size: 32rpx;
			color: #333333;
			line-height: 46rpx;
			text-align: center;
		}
	}


	.talk_flex_0 {
		background: #fff;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.talk_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 700;
		color: #333333;
		line-height: 50rpx;
	}

	.talk_fd0_0_c0_c0 {
		font-size: 36rpx;
		color: #333;
	}

	.talk_fd0_0_c0 {
		width: 120rpx;
	}

	.talk_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
	}

	.talk_flex_1 {
		padding: 24rpx;
	}
</style>